<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-collapse v-model="active1">
          <fu-collapse-item 
            title="标题1" 
            name="item1"
          >
            代码是写出来给人看的，附带能在机器上运行
          </fu-collapse-item>
          <fu-collapse-item 
            title="标题2" 
            name="item2"
          >
            技术无非就是那些开发它的人的共同灵魂
          </fu-collapse-item>
          <fu-collapse-item 
            title="标题3" 
            name="item3"
          >
            在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准
          </fu-collapse-item>
        </fu-collapse>
      </view>
    </view>
    
    <!-- 手风琴模式 -->
    <view class="demo-block">
      <view class="demo-block__title">手风琴模式</view>
      <view class="demo-block__content">
        <fu-collapse v-model="active2" accordion>
          <fu-collapse-item 
            title="标题1" 
            name="item1"
          >
            代码是写出来给人看的，附带能在机器上运行
          </fu-collapse-item>
          <fu-collapse-item 
            title="标题2" 
            name="item2"
          >
            技术无非就是那些开发它的人的共同灵魂
          </fu-collapse-item>
          <fu-collapse-item 
            title="标题3" 
            name="item3"
          >
            在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准
          </fu-collapse-item>
        </fu-collapse>
      </view>
    </view>
    
    <!-- 自定义图标 -->
    <view class="demo-block">
      <view class="demo-block__title">自定义图标</view>
      <view class="demo-block__content">
        <fu-collapse v-model="active3">
          <fu-collapse-item 
            title="标题1" 
            name="item1"
            show-icon
            icon="&#xe6e3;"
          >
            代码是写出来给人看的，附带能在机器上运行
          </fu-collapse-item>
          <fu-collapse-item 
            title="标题2" 
            name="item2"
            show-icon
            icon="&#xe6e4;"
          >
            技术无非就是那些开发它的人的共同灵魂
          </fu-collapse-item>
          <fu-collapse-item 
            title="标题3" 
            name="item3"
            show-icon
            icon="&#xe6e6;"
          >
            在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准
          </fu-collapse-item>
        </fu-collapse>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      active1: ['item1'],
      active2: null,
      active3: ['item1']
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    border-radius: var(--fu-radius-base);
    overflow: hidden;
  }
}
</style> 